import QtQuick 1.1

Item {
    id: customButton
    signal clicked
    property string img
    property alias label: btnText.text
    property int imgHeight

    anchors.margins: 5

    width: btnImage.paintedWidth + btnText.paintedWidth + 18
    height: Math.max(btnImage.paintedHeight + 6, btnText.paintedHeight + 6)

    Image {
        id: btnImage
        source: img
        height: imgHeight
        fillMode: Image.PreserveAspectFit
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.top: parent.top
        anchors.topMargin: 6
        smooth: true
        asynchronous: true
        opacity: 0.5
        Behavior on opacity {
            NumberAnimation { properties:"opacity"; duration: 200 }
        }
        z: 2
    }

    Text {
        id: btnText
        visible: !(text.length === 0)
        anchors.left: btnImage.right
        anchors.leftMargin: 6
        anchors.verticalCenter: btnImage.verticalCenter
        color: "black"
        font.pixelSize: 20
        z: 1
    }

    Rectangle {
        color: "#222222"
        anchors.fill: parent
        opacity: 0.7
        z: 0
    }
    Rectangle {
        id: innerFill
        color: "#fffeb1"
        anchors.fill: parent
        anchors.margins: 1
        opacity: 0.7
        z: 0
        Behavior on opacity {
            NumberAnimation { properties:"opacity"; duration: 200 }
        }
    }

    MouseArea {
        id: btnMouse
        anchors.fill: parent
        anchors.margins: -5 // Make MouseArea bigger than the parent itself
        onClicked: customButton.clicked()
        onPressed: buttonPressed();
        onReleased: buttonReleased();
        onActiveFocusChanged: {console.log("focuschagne") }
        onContainsMouseChanged: {
            if (!btnMouse.containsMouse) {
                onReleased: buttonReleased();
            }
        }
    }

    function buttonPressed () {
        btnImage.opacity = 1.0;
        innerFill.opacity = 0.9;
    }
    function buttonReleased () {
        btnImage.opacity = 0.5;
        innerFill.opacity = 0.7;
    }
}

